<template>
  <v-main v-if="loading">
    <v-app-bar
        flat
        align="center"
        height="60px"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="2" class="text-left pl-0">
            <v-btn icon @click="$router.back()" class="ml-n3">
              <v-icon color="lighten-1">mdi-arrow-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="8" class="text-center text-truncate mt-3">
            正在加载...
          </v-col>
          <v-col cols="2" class="text-right pr-0">
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>
    <v-container>
      <v-row>
        <v-col cols="12">
          <v-skeleton-loader
              elevation="2"
              type="card-avatar, article"
          ></v-skeleton-loader>
        </v-col>
      </v-row>
    </v-container>
  </v-main>
  <v-main class="full-height" v-else>
    <v-app-bar
        flat
        align="center"
        height="60px"
    >
      <v-container>
        <v-row justify="center" class="py-0">
          <v-col cols="2" class="text-left pl-0">
            <v-btn icon @click="$router.back()" class="ml-n3">
              <v-icon color="lighten-1">mdi-arrow-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="8">
            <div class="mt-3 text-truncate text-center">
              {{ form.type==='review'?'产品点评':'心得笔记' }}
            </div>
          </v-col>
          <v-col cols="2" class="text-right pr-0 pt-5">
            <v-menu offset-y>
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                    small
                    icon
                    v-bind="attrs"
                    v-on="on"
                >
                  <v-icon class="lighten-4">mdi-dots-vertical</v-icon>
                </v-btn>
              </template>
              <v-list dense>
                <v-list-item dense @click="doGoReport">
                  <v-list-item-title>投诉</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>

    <v-container>
      <!--      标题-->
      <v-row>
        <v-col cols="12" class="text-h6">
          {{ form.title }}
        </v-col>
      </v-row>
      <v-divider class="my-2"></v-divider>
      <!--      头像-->
      <v-row>
        <v-col cols="2" class="text-center">
          <v-avatar @click="$router.push('/userInfo/'+form.publisher)">
            <v-img :src="getAvatarPath" v-if="getAvatarPath"></v-img>
          </v-avatar>
        </v-col>
        <v-col cols="10">
          <v-row class="pt-2">
            <v-col cols="8" class="pb-0 pt-1">
              <span class="text-subtitle-1">{{ form.nickname }}</span>
            </v-col>
            <!--            关注按钮-->
            <v-col cols="4" class="pb-0 pt-1 text-right" v-show="form.publisher!==$store.state.uid">
              <v-btn
                  small
                  color="primary"
                  v-if="userSubscribed"
                  @click="cancelSubscribe"
              >
                已关注
              </v-btn>
              <v-btn
                  small
                  outlined
                  color="primary"
                  v-else
                  @click="doSubscribe"
              >
                <v-icon class="lighten-4">mdi-plus</v-icon>
                关注
              </v-btn>
            </v-col>
            <v-col cols="12" class="text-caption py-0">
              {{ form.description }}
            </v-col>
          </v-row>
        </v-col>
      </v-row>
      <!--      内容-->
      <v-row>
        <v-col id="content" v-html="form.content" style="text-align: justify">

        </v-col>
      </v-row>

      <v-row v-if="form.type==='review'">
        <v-col cols="12">
          <v-card elevation="0" width="100px" style="background-color: rgba(238,238,238,0.71);"
                  class="pa-1 my-1 mr-2 d-inline-block"  @click="$router.push('/production/'+production.pid)">
            <v-img v-if="production.pictures[0]" :src="baseUrl+imgPrefixUrl+production.pictures[0]"></v-img>
            <v-card-subtitle class="pa-0 pt-1 text-center overflow-hidden" style="max-height: 2.6rem">
              {{production.title}} <br>
              {{production.brandName}}
            </v-card-subtitle>
          </v-card>
        </v-col>
      </v-row>
      <!--      底部信息-->
      <v-row class="mt-5">
        <v-col cols="6" class="py-0 text-caption">
          {{ form.createTime }}
        </v-col>
        <v-col cols="6" class="py-0 text-caption text-right">
          <v-icon @click="showComments = !showComments" v-if="showComments" color="primary">mdi-forum</v-icon>
          <v-icon @click="showComments = !showComments" v-else>mdi-forum-outline</v-icon>
          {{commentCount}}
          <v-icon class="ml-3" color="primary" v-if="approved" @click="cancelApprove">mdi-thumb-up</v-icon>
          <v-icon class="ml-3" v-else @click="doApprove">mdi-thumb-up-outline</v-icon>
          {{approveCount}}
          <v-icon class="ml-3" color="primary" v-if="favourite" @click="cancelFavourite" size="25">mdi-star</v-icon>
          <v-icon class="ml-3" v-else @click="doFavourite" size="25">mdi-star-outline</v-icon>
          {{favouriteCount}}
        </v-col>
      </v-row>
      <v-divider class="mt-5" id="comments"></v-divider>
    </v-container>

    <comments
        :show-add-comment="showAddComment"
        v-show="showComments"
        @closeAddComment="showAddComment=false"
        :comment-type="'article'"
        :id="$route.params.aid"
        @updateCommentsCount="onUpdateCommentsCount"
        @toast="$emit('toast',$event)"
    ></comments>

    <!--    添加评论按钮-->
    <v-bottom-navigation
        color="primary"
        fixed
        v-if="showComments"
    >
      <v-row no-gutters>
        <v-col cols="12" class="text-center bg-main-color">
          <v-row align="center" no-gutters class="full-height">
            <v-col cols="12" @click="addComment">
              <v-icon size="28" color="white">mdi-plus</v-icon>
              <span class="white--text text-subtitle-1">添加评论</span>
            </v-col>
          </v-row>

        </v-col>
      </v-row>
    </v-bottom-navigation>

    <show-big-image :show="imgOverlay" @dismiss="imgOverlay=false" :src="imgSrc"></show-big-image>
    <new-report :show="isShowNewReport" :id="$route.params.aid" type="article" @dismiss="isShowNewReport=false" @toast="$emit('toast',$event)"></new-report>
  </v-main>
</template>

<script>
import ShowBigImage from "../components/ShowBigImage";
import Comments from "../components/Comments";
import {baseUrl, imgPrefixUrl, imageSize} from "../myConfig";
import {printMsg, b64_to_utf8, myDateFormat, utf8_to_b64, rules, simpleCopy} from "../util/util";
import NewReport from "../components/NewReport";

export default {
  name: "Article",
  components: {NewReport, ShowBigImage,Comments},
  data: () => ({
    form: {
      aid: '',
      title: "",

      content: '',
      showComments: true,
    },
    baseUrl:baseUrl,
    imgPrefixUrl:imgPrefixUrl,
    commentCount:0,
    approveCount:0,
    favouriteCount:0,

    userSubscribed: true,
    approved: false,
    favourite: false,

    showComments: true,
    showAddComment: false,

    loading: true,
    imgOverlay: false,
    imgSrc: '',

    production:{
      pictures:[]
    },

    isShowNewReport:false,

  }),
  methods: {

    showImage(src, raw = false) {
    if (!raw) {
        src = baseUrl + imgPrefixUrl + src;
      }
      this.imgSrc = src;
      this.imgOverlay = true;
    },
    getArticles() {
      let data = {aid: this.form.aid,currentUid:this.$store.state.uid}
      this.$http.post('article/listArticle', data).then(res => {
        printMsg(res.data,this)
        this.approved = !!res.data[0].approved
        this.favourite = !!res.data[0].favourite
        this.approveCount = res.data[0].approveCount
        this.userSubscribed = !!res.data[0].subscribed
        this.favouriteCount = res.data[0].favouriteCount
        this.form = res.data[0]
        this.form = Object.assign(res.data[0], res.data[0].publisherUser)
        this.form.content = b64_to_utf8(this.form.content)
        this.form.createTime = myDateFormat(this.form.createTime)
        this.processContent()
        this.loading = false

        if (this.form.type==='review'){
          this.getReviewProduction()
        }
      }).catch(res => {
        this.$emit("toast", res.msg)
      })
    },
    processContent() {
      // 处理content中的图片和链接的url
      this.form.content = this.form.content.replace(/src="(.*?)"/, `src="${baseUrl + imgPrefixUrl}$1"`)
    },
    addComment() {
      this.showAddComment = true;
      let add = document.getElementById("comments")
      add.scrollIntoView()
    },
    doApprove(){
      let data = {
        fromUid:this.$store.state.uid,
        toAid:this.form.aid,
        type:'article'
      }
      this.$http.post('approve/doApprove', data).then(res => {
        this.approved = true
        this.approveCount+=1
        this.$emit('toast','点赞成功')
      }).catch(res => {
        this.$emit("toast", res.msg)
      })
    },
    cancelApprove(){
      let data = {
        fromUid:this.$store.state.uid,
        toAid:this.form.aid,
        type:'article'
      }
      this.$http.post('approve/cancelApprove', data).then(res => {
        this.approved = false
        this.approveCount-=1
        this.$emit('toast','取消点赞成功')
      }).catch(res => {
        this.$emit("toast", res.msg)
      })
    },
    doFavourite(){
      let data = {
        fromUid:this.$store.state.uid,
        toAid:this.form.aid,
        type:'article'
      }
      this.$http.post('favourite/doFavourite', data).then(res => {
        this.favourite = true
        this.favouriteCount+=1
        this.$emit('toast','收藏成功')
      }).catch(res => {
        this.$emit("toast", res.msg)
      })
    },
    cancelFavourite(){
      let data = {
        fromUid:this.$store.state.uid,
        toAid:this.form.aid,
        type:'article'
      }
      this.$http.post('favourite/cancelFavourite', data).then(res => {
        this.favourite = false
        this.favouriteCount-=1
        this.$emit('toast','取消收藏成功')
      }).catch(res => {
        this.$emit("toast", res.msg)
      })
    },
    doSubscribe(){
      let data = {
        fromUid:this.$store.state.uid,
        toUid:this.form.uid,
      }
      this.$http.post('subscribe/doSubscribe', data).then(res => {
        this.userSubscribed = true
        this.$emit('toast','关注成功')
      }).catch(res => {
        this.$emit("toast", res.msg)
      })
    },
    cancelSubscribe(){
      let data = {
        fromUid:this.$store.state.uid,
        toUid:this.form.uid,
      }
      this.$http.post('subscribe/cancelSubscribe', data).then(res => {
        this.userSubscribed = false
        this.$emit('toast','取消关注成功')
      }).catch(res => {
        this.$emit("toast", res.msg)
      })
    },
    onUpdateCommentsCount(count){
      this.commentCount = count
    },
    getReviewProduction(){
      let data = {
        pid:this.form.pid,
        currentUid:this.$store.state.uid
      }
      this.$http.post('production/listProduction', data).then(res => {
        res.data = res.data[0]
        this.production = res.data
        this.production.pictures = res.data.pictureList
        printMsg(this.production,this)
      }).catch(res => {
        this.$emit("toast",res.msg)
      })
    },
    doGoReport(){
      this.isShowNewReport=true
    }
  },
  //监控pid变化手动更新页面内容
  watch: {
    '$route': {
      handler() {
        this.form.aid = this.$route.params.aid
        this.getArticles()
      },
      deep: true
    }
  },
  computed: {
    getAvatarPath() {
      if (this.form.avatar) {
        return baseUrl + imgPrefixUrl + this.form.avatar
      } else {
        return this.$store.getters.getAvatar
      }
    }
  },
  beforeMount() {
    this.form.aid = this.$route.params.aid
    this.getArticles()
  }
}
</script>

<style scoped>

</style>
